<!DOCTYPE html>
<html>
	<head>
		<title>M4Tween.js - Documentation</title>
		<script type="text/javascript" src="../../CodeFormater/src/CodeFormater.js"></script>
		<script type="text/javascript">
			window.addEventListener("load", init, false);

			function init()
			{
				CodeFormater.thesaurus["m4tween"] = [
					/(M4Tween\.to)/g,
					/(M4Tween\.useStyle)/g,
					/(M4Tween\.killTweensOf)/g,
					/(\.then)/g,
					/(\.onStart)/g,
					/(\.onUpdate)/g,
					/(\.onComplete)/g
				];
				document.querySelectorAll("pre").forEach(CodeFormater.applyTo);

			}
			/**
			 * CHEAT OMG
			 */
			NodeList.prototype.forEach = Array.prototype.forEach;
		</script>
		<link href="../../common/docs/docs.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
		<header>
			<h1>M4Tween</h1>
		</header>
		<div class="content">
			<h2 id="download">TL;DR</h2>
			<p>
				<button onclick="window.open('../../Dependencies/src/?need=M4Tween');">Download</button>
			</p>
			<h2>Introduction</h2>
				<p>
					Librairy to animate DOM Element on their CSS properties &amp; to ease numeric property on abstract objects
				</p>
				<p>
					Works with a lot of CSS properties like:
				</p>
				<ul>
					<li>marginTop, marginRight, marginBottom, marginLeft</li>
					<li>paddingTop, paddingRight, paddingBottom, paddingLeft</li>
					<li>top, right, bottom, left</li>
					<li>backgroundColor</li>
					<li>color</li>
					<li>opacity</li>
					<li>rotation</li>
					<li>Pretty much any CSS property with numeric value (fontSize must work ?)</li>
				</ul>
				</div>
				<div class="content">
				<h2>Code Samples</h2>
				<h3>The basics</h3>
<pre>var element = document.getElementById("omg");
M4Tween.to(element, 1, {marginLeft:"10px"});</pre>
				<h3>One element, one Tween, as many properties as you could imagine</h3>
				<p>
					Possibility to stack animation on differents properties during one Tween only
				</p>
<pre>/**
 * The result should be awsome, i can't wait to see it running :o
 **/
M4Tween.to(element, 1, {marginLeft:"10px", paddingLeft:"10px", color:"#ff0000", backgroundColor:"#0000ff"});</pre>
				<h3>Delay</h3>
				<p>
					Brand new feature (of the death), possibility to add delay on each tween
				</p>

<pre>/**
 * Dear element, plz forgive me for my behavior, in 5 second, everythings are gonna be normal again, i promess
 **/
M4Tween.to(element, 1, {color:"#000000", backgroundColor:"#ffffff", delay:5});</pre>
				<h3>Want some more ? Ease</h3>
				<p>
					Yeah, Linear is great (it's even better than that) but using any other kind of easing function is a minimum. All credits to Rober Penner (and his killing easing functions)
				</p>

<pre>M4Tween.to(element, 1, {color:"#0000ff", backgroundColor:"#ff00ff", ease:Bounce.easeOut});
/**
 * element : Oh no, not me again :(
 * me      : Mouhahahaha
 **/</pre>
				<h3>What about callback ?</h3>
				<p>Each tween support 3 kinds of callback</p>
				<ul>
					<li>onStart : Called when the tween is started ("you don't say" :o)</li>
					<li>onUpdate : The target of the tween is passed as first argument</li>
					<li>onComplete : I completed my mission, what's next master?</li>
				</ul>

<pre>/**
 * I have to try fontSize
 **/
M4Tween.to(element, 1, {fontSize:"26px"})
	.onStart(function()
	{
		console.log("M4Tween : Here we go again");
	})
	.onUpdate(function(pTarget)
	{
		console.log("M4Tween : Updating on "+pTarget.getAttribute("name"));
	})
	.onComplete(function()
	{
		console.log("M4Tween : That was cool");
	};</pre>
				<h3>Tween Sequence</h3>
<pre>M4Tween.to(element, 1, {color:"#000000"})
	.then(element, .4, {color:"#ff99ff"})
	.then(element, 1, {color:"#99ff99"})
	.then(element, .3, {color:"#000000"});</pre>
				<h3>
					CSS Properties that's cool, but let's go further
				</h3>
				<p>The tween engine works with DOM Elements, but it can also be used with abstract object unrelated to stylesheets.</p>

<pre>/**
 * let's give some rest to our friend 'element'
 **/
var myObject =
{
	someProp:0,
	someOtherProp:200
};
M4Tween.to(myObject, .7, {useStyle:false, someProp:300, someOtherProp:-300});

/**
 * There is 2 ways of doing that
 *       - by setting the option useStyle to false, in the specific tween instance
 *       - by overloading the static property useStyle on the M4Tween engine (this will interfere with further tween declarations)
 **/
M4Tween.useStyle = false;
M4Tween.to(myObject, .7, {someProp:-300, someOtherProp:300});</pre>
		</div>
		<div class="apiref content">
			<h2>API Reference</h2>
			<h3>M4Tween</h3>
			<div class="method">
				<span>to</span>(pElement, pDuration, pProperties)<div class="from">M4Tween</div>
				<p>Check tween's pool, instanciate more if necessary, get &amp; setup one before returning it</p>
				<p><span>pElement</span> (object) : M4Tween's target</p>
				<p><span>pDuration</span> (number) : Tween's duration</p>
				<p><span>pProperties</span> (object) : Target's properties to animate &amp; optionnal parameters (delay, useStyle...)</p>
			</div>
			<div class="method">
				<span>killTweensOf</span>(pTarget, pComplete)<div class="from">M4Tween</div>
				<p>Push every tweens of pTarget into a local "Garbage collector" (array of tweens to be cleaned before getting back to the passive pool)</p>
				<p><span>pTarget</span> (object) : I let you guess</p>
				<p><span>pComplete</span> (object) : Indicate whether it trigger "onComplete" callback or not</p>
			</div>
			<div class="method">
				<span>onStart</span>(pCallBack)<div class="from">M4Tween</div>
				<p>Callback to trigger when the tween start</p>
				<p><span>pCallBack</span> (function) : function to execute</p>
			</div>
			<div class="method">
				<span>onUpdate</span>(pCallBack)<div class="from">M4Tween</div>
				<p>Callback to trigger when the tween is running</p>
				<p><span>pCallBack</span> (function) : function to execute</p>
			</div>
			<div class="method">
				<span>onComplete</span>(pCallBack)<div class="from">M4Tween</div>
				<p>Callback to trigger when the tween is completed</p>
				<p><span>pCallBack</span> (function) : function to execute</p>
			</div>
			<div class="method">
				<span>then</span>(pTarget, pDuration, pProperties)<div class="from">M4Tween</div>
				<p>Setup a new Tween to start once the current one is complete</p>
				<p><span>pElement</span> (object) : M4Tween's target</p>
				<p><span>pDuration</span> (number) : Tween's duration</p>
				<p><span>pProperties</span> (object) : Target's properties to animate &amp; optionnal parameters (delay, useStyle...)</p>
			</div>
		</div>
		<footer>
			DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
		</footer>
	</body>
</html>